<template>
  <div class="app-container">
    <el-card class="welcome-card">
      <h2>欢迎使用养老院管理系统</h2>
      <p>当前角色：家属</p>
    </el-card>

    <div class="dashboard-grid">

      <!-- 角色专属卡片 -->
      <el-card
          v-for="item in roleMenus"
          :key="item.path"
          class="menu-card"
          shadow="hover"
          @click="navigateTo(item.path)"
      >
        <div class="card-content">
          <el-icon :size="40" :color="item.color">
            <component :is="item.icon"/>
          </el-icon>
          <h3>{{ item.title }}</h3>
          <p class="desc">{{ item.desc }}</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {useRouter} from 'vue-router'
import {
  User,
  Notebook,
  Bell,
  ChatLineRound,
  Setting,
  FirstAidKit,
  Calendar,
  List,
  Document, DocumentRemove, DocumentAdd
} from '@element-plus/icons-vue'

const router = useRouter()


const roleMenus = ref([
  {path: '/family/editCurrentUser', title: '个人设置', desc: '修改账户信息', icon: Setting, color: '#909399'},
  {path: '/family/checkup-record', title: '老人体检记录', desc: '查看老人体检记录', icon: FirstAidKit, color: '#67C23A'},
  {path: '/family/health-record', title: '老人健康档案', desc: '查看老人健康档案', icon: FirstAidKit, color: '#409EFF'},
  {path: '/family/notifications', title: '系统通知', desc: '查看系统通知', icon: Bell, color: '#E6A23C'}
])


const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.welcome-card {
  margin-bottom: 20px;
  text-align: center;
}

.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.menu-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.menu-card:hover {
  transform: translateY(-5px);
}

.card-content {
  padding: 20px;
  text-align: center;
}

.card-content h3 {
  margin: 15px 0 10px;
  color: #303133;
}

.desc {
  color: #606266;
  font-size: 0.9em;
  line-height: 1.5;
}
</style>
